<template>
    <div class="w_h_100">
    <div class="box">
      <div class="inlet">系统管理 > 流程管理 > <span class="size">节点管理</span></div>
      <myform :fields="fields" :model="values" class="m_t_10" >
        <template v-slot:button>
          <el-button @click="resetting">重置</el-button>
          <el-button type="primary" :icon="Search" @click="searchFor">搜索</el-button>
        </template>
      </myform>
    </div>
    <div class="mytable m_t_10 ">
        <h4>节点列表</h4>
      <mytable :fields="tableFields"  width="100" ref="tableRef" :values="values" api="nodeFind" class="m_t_10" :isSelection="false">
        <template v-slot:timeLimit="{row}">{{ row.timeLimit }}天</template>
        <template v-slot:nodeCategory="{row}">
        <span>{{ row.nodeCategory==1?'保前':'保后' }}</span>
        </template>
        <template v-slot:crossDept="{row}">
        <span>{{ row.crossDept==0?'否':'是' }}</span>
        </template>
        <template v-slot:batchApprove="{row}">
        <span>{{ row.batchApprove==0?'否':'是' }}</span>
        </template>
        <template v-slot:operation="{ row }">
          <div class="d_f j_c_s_b">
            <span class="error" @click="deleteOut(row)" v-hasPerm="'deleteNode'">删除</span>
          </div>
        </template>
      </mytable>
    </div>
  </div>
</template>

<script lang='ts'>
import {defineComponent, reactive, toRefs,onBeforeMount,ref} from 'vue'
import { Search, Plus } from '@element-plus/icons-vue'
import { copy } from '../../../utils/date'
import { Message } from '../../../utils/resetMessage'
import { ElMessageBox } from 'element-plus'
import {nodeDel} from '../../../api/system/flowPath'
import {flowPathNodeType} from '../../../type/system'
const values={
  name:''
}
export default defineComponent({
name:'',
setup(){
const data:flowPathNodeType = reactive({
  fields: [
        {
          label: "节点名称",
          prop: 'name',
          placeholder: '请输入',
          type: 'input',
          labelWidth:'96px'
        },
        {
          prop: 'button'
        }
      ],
      values:copy(values),
      tableFields:[
        {
          label:'节点名称',
          prop:'name',
        },
        {
          label:'操作角色',
          prop:'roleName',
        },
        {
          label:'完成时限',
          prop:'timeLimit',
        },
        {
          label:'节点分类',
          prop:'nodeCategory',
        },
        {
          label:'是否跨部门',
          prop:'crossDept',
        },
        {
          label:'是否批量审批',
          prop:'batchApprove',
        },
        {
          label:'创建时间',
          prop:'createdTime',
        },
      ],
})
const tableRef=ref()
onBeforeMount(()=>{
})
const methods={
   //表格数据重置
   resetting() {
        data.values = copy(values)
        tableRef.value.resettingTable(data.values)
      },
      //列表根据筛选条件搜索
      searchFor() {
        tableRef.value.handleCurrentChange(1)
      },
      //删除当前节点
      deleteOut(row:any){
        let val=`确认删除”${row.name}“`
          ElMessageBox.confirm(
            val,
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error',
            }
          )
            .then(() => {
              nodeDel({id:row.id,status:row.status}).then((res:any)=>{
                Message({type:'success',message:'删除成功'})
                tableRef.value.handleCurrentChange(1)//添加表格之后重新获取表格
              })
            })
        },

        //查看当前节点
        detail(row:any){

        }
}
return {
...toRefs(data),
...methods,tableRef,
Search, Plus
}
}
})
</script>
<style scoped lang='scss'>
.box {
  width: calc(100% - 64px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  height: 70px;
  padding: 10px 32px;
  margin-top: 10px;
}

.mytable {
  overflow-y: auto;
  width: calc(100% - 64px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 10px 32px;
  height: calc(100% - 125px);
}
</style>